<script setup >
import { h, onMounted, ref, reactive, watch } from "vue";
import { NCheckbox, NButton, NTag, NP, NPopconfirm } from "naive-ui";
import { useStaffStore } from "@/stores/staff";
import { zhCN, dateZhCN } from "naive-ui";
import { useRouter } from "vue-router";
import { defaultSpan } from "naive-ui/es/grid/src/GridItem";
const router = useRouter();

const staffStore = useStaffStore();

//高度自适应
let autoTableHeight = ref(null);
const autuHeight = (height) => {
  autoTableHeight.value = window.innerHeight - height;
  window.onresize = () => {
    autoTableHeight.value = window.innerHeight - height;
  };
  return autoTableHeight.value;
};

import { getTableHright } from '@/utils/autoHeight'
const { getHeight } = getTableHright(390)

//获取列表
onMounted(async () => {
  await getList();
  pageCount.value = Math.ceil(staffStore.total / staffStore.pageSize);
});

//列表获取
const getList = async () => {
  return await staffStore.getList({
    page: staffStore.page - 1,
    pageSize: staffStore.pageSize,
    query: query.value,
    query1: query1.value,
  });
};

//跳转  
const goAddStaff = () => {
  router.push("staff/addstaff");
};



//渲染列表
const columns = ref([
  {
    title: "姓名",
    key: "name",
    align: "center",
  },
  {
    title: "岗位名称",
    key: "post",
    align: "center",
  },
  {
    title: "登录账号",
    key: "id",
    align: "center",
  },
  {
    title: "启用状态",
    key: "length",
    align: "center",
    render(row, index) {
      return h(
        "span",
        {},
        {
          default: () => (row.on == 1 ? "启用" : "未启用"),
        }
      );
    },
  },
  {
    title: "启用状态",
    key: "length",
    align: "center",
    render(row) {
      const abb = ["编辑", "删除"];
      return [
        h(
          NButton,
          {
            style: {
              marginRight: "6px",
              fontSize: "12px",
              color: "blue",
              textAlign: "center",
              lineHeight: "100%",
            },
            type: "success",
            strong: true,
            tertiary: true,
            size: "small",
            onClick: async () => {
              const data = encodeURIComponent(JSON.stringify(row));
              router.push({ name: "addstaff", query: { data } });
            },
          },
          {
            default: () => "编辑",
          }
        ),
        h(
          NPopconfirm,
          {
            positiveButtonProps: {
              size: "tiny",
              color: "#007293",
              bordered: true,
            },
            negativeButtonProps: {
              size: "tiny",
              color: "#007293",
              bordered: true,
            },
            positiveText: "确认",
            negativeText: "取消",
            onPositiveClick: async () => {
              await staffStore.deleteList({ _id: row._id });
              await getList();
              pageCount.value = Math.ceil(
                staffStore.total / staffStore.pageSize
              );
              if (staffStore.page > pageCount.value) {
                page.value = pageCount.value;
              }
            },
          },
          {
            trigger: () => {
              return h(
                NButton,
                {
                  style: {
                    marginRight: "6px",
                    fontSize: "12px",
                    color: "blue",
                    textAlign: "center",
                    lineHeight: "100%",
                  },
                  type: "success",
                  strong: true,
                  tertiary: true,
                  size: "small",
                },
                {
                  default: () => "删除",
                }
              );
            },
            default: () => "确认删除吗?  ",
          }
        ),
      ];
    },
  },
]);

//分页
const page = ref(staffStore.page);
const pageCount = ref(null);

watch(page, () => {
  staffStore.page = page.value;
  getList();
});

const pageSizeChange = async (pagesize) => {
  staffStore.pageSize = pagesize
  await getList()
  pageCount.value = Math.ceil(staffStore.total / staffStore.pageSize);
}

//搜索
let query = ref(staffStore.query);
let query1 = ref(staffStore.query1);
const searchClk = async () => {
  query.value ? null : (query.value = "");
  query1.value ? null : (query1.value = "");
  await getList();
  pageCount.value = Math.ceil(staffStore.total / staffStore.pageSize);
};
const changeIptSearchName = async () => {
  if (!query.value) {
    await getList();
    pageCount.value = Math.ceil(staffStore.total / staffStore.pageSize);
  }
};

const changeIptSearchOffer = async () => {
  if (!query1.value) {
    await getList();
    pageCount.value = Math.ceil(staffStore.total / staffStore.pageSize);
  }
};

const selectBlur = () => {
  getList();
};

</script>


<template>
  <n-card title="员工管理">
    <n-grid x-gap="12" :cols="3">
      <n-gi>
        <div style="margin-top: 25px">
          姓名:
          <n-input style="width: 180px; margin-left: 20px" v-model:value="query" type="text" placeholder="请输入"
            clearable="true" @change="changeIptSearchName" @clear="selectBlur" />
        </div>
      </n-gi>
      <n-gi>
        <div style="margin-top: 25px">
          <div style="display: inline-block; float: left; line-height: 34px">
            岗位:
          </div>
          <n-input style="width: 180px; margin-left: 20px" v-model:value="query1" type="text" placeholder="请输入"
            clearable="true" @change="changeIptSearchOffer" @clear="selectBlur" />
        </div>
      </n-gi>
      <n-gi>
        <div style="margin-top: 25px">
          <n-button @click="searchClk" style="float: right" type="tertiary">
            查询
          </n-button>
        </div>
      </n-gi>
    </n-grid>
  </n-card>
  <div class="space" vertical :size="12">
    <div style="padding: 10px 0px; overflow: hidden;">
      <div style="
          color: #7764ca;
          font-size: 12px;
          font-weight: 600;
          line-height: 34px;
          float: left;
        ">
        员工人数：{{ staffStore.total }}人
      </div>
      <n-button style="float: right; font-size: 11px; width: 100px" color="#7764ca" dashed @click="goAddStaff">
        添加员工
      </n-button>
    </div>  

    <n-data-table :bordered="false" :striped="true" :style="{ height: `${getHeight}px` }" :columns="columns"
      :max-height="autuHeight(420)" :data="staffStore.list" />

    <div style="padding-top: 30px">
      <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
        <n-pagination style="float: right" show-quick-jumper v-model:page="page" :page-count="pageCount"
          v-model:page-size="staffStore.pageSize" :page-sizes="staffStore.pageSizes" show-size-picker
          @update:page-size="pageSizeChange">
          <template #goto> 跳至 </template>
        </n-pagination>
      </n-config-provider>
    </div>
  </div>
</template>


<style scoped>
.n-card>>>.n-card-header {
  background-color: #e9eff5;
  height: 45px;
  font-size: 16px;
}

.space {
  background-color: white;
  margin-top: 10px;
  overflow: hidden;
  padding: 0px 10px 20px 10px;
}

</style>